<template>
	<van-popup
		v-model:show="innerShow"
		position="bottom"
		:style="{ height: '690px', background: '#f5f6f9' }"
		round
	>
		<div class="popup-header">
			<span class="popup-title">{{
				t('datePicker.title', '期望上门时间')
			}}</span>
			<van-icon name="close" class="close-icon" @click="close" />
		</div>
		<div class="calendar-desc">
			<div class="calendar-title">
				{{ t('datePicker.dateTitle', '期望日期') }}
			</div>
			<div class="calendar-tip">
				{{ t('datePicker.dateTip', '日期可多选，供技术人员调配时间') }}
			</div>
		</div>
		<div
			class="calendar-selected"
			v-if="modelValue && modelValue.length === 2"
		>
			<span class="selected-label">{{
				t('datePicker.selected', '已选：')
			}}</span>
			<span class="selected-date">{{ formatDate(modelValue[0]) }}</span>
			<span>{{ t('datePicker.to', '至') }}</span>
			<span class="selected-date">{{ formatDate(modelValue[1]) }}</span>
			<span>{{ t('datePicker.period', '期间') }}</span>
		</div>
		<van-calendar
			v-model:show="showCalendar"
			title=""
			:poppable="false"
			:show-title="false"
			:switch-mode="'month'"
			:show-confirm="false"
			:style="{ height: '420px' }"
			type="range"
			:min-date="new Date()"
			:default-date="modelValue"
			@select="onSelect"
		/>

		<div class="section-label">
			{{ t('datePicker.timeLabel', '选择时段') }}
		</div>
		<div class="time-section">
			<div
				v-for="item in timeOptions"
				:key="item"
				:class="['time-btn', { active: item === timeValue }]"
				@click="selectTime(item)"
			>
				{{ item }}
			</div>
		</div>
	</van-popup>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, defineEmits } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const props = defineProps<{
	modelValue: Date[]
	show: boolean
	timeValue: string
}>()
const emit = defineEmits([
	'update:show',
	'update:modelValue',
	'update:timeValue',
])

// 用本地变量控制弹窗显示
const innerShow = ref(props.show)
watch(
	() => props.show,
	(val) => (innerShow.value = val)
)
watch(innerShow, (val) => emit('update:show', val))

const showCalendar = ref(true)
const timeOptions = [
	t('datePicker.time1', '08:00-12:00'),
	t('datePicker.time2', '13:00-17:00'),
	t('datePicker.time3', '18:00-21:00'),
]

function close() {
	innerShow.value = false
}
function onSelect(dates: Date[]) {
	console.log('选择日期', dates)
	emit('update:modelValue', dates)
}
function selectTime(val: string) {
	emit('update:timeValue', val)
}
function formatDate(date: Date) {
	if (!date) return ''
	const m = date.getMonth() + 1
	const d = date.getDate()
	return `${m}${t('datePicker.month', '月')}${d}${t('datePicker.day', '日')}`
}
watch(
	() => props.show,
	(val) => {
		showCalendar.value = val
	}
)
</script>

<style scoped>
.popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px 0 20px;
	background: #f5f6f9;
}
.popup-title {
	font-size: 16px;
	font-weight: 600;
}
.close-icon {
	font-size: 24px;
	cursor: pointer;
}
.section-label {
	font-size: 16px;
	font-weight: 600;
	margin: 16px 0 8px 20px;
}
.time-section {
	display: flex;
	gap: 9px;
	padding: 0 20px 20px 20px;
}
.time-btn {
	flex: 1;
	height: 45px;
	border-radius: 10px;
	background: #ededed;
	color: #3a3a3a;
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 2px solid transparent;
}
.time-btn.active {
	background: #d0e1ff;
	border-color: #0065d1;
	color: #0065d1;
}
.calendar-desc {
	padding: 12px 20px 0 20px;
}
.calendar-title {
	font-size: 16px;
	font-weight: 600;
	color: #000;
}
.calendar-tip {
	font-size: 12px;
	color: #b1b1b2;
	margin-top: 2px;
}
.calendar-selected {
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 600;
	color: #000;
	padding: 12px 20px 0 20px;
	margin-bottom: 10px;
}
.selected-label {
	color: #000;
}
.selected-date {
	color: #fff;
	background: #0f68fe;
	border-radius: 15px;
	padding: 2px 10px;
	margin: 0 4px;
}
::v-deep(.van-calendar__body) {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}
::v-deep(.van-calendar__header) {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}
</style>

export default { // ... existing code ... }
